<template>
 <div class="home-content">
  <el-container>
   <el-aside width="200px">
    <div class="user-header">
     <img src="../assets/userImg.png" alt="解析失败">
     <div class="user-info" @click="quitLogin">
      <span>{{userInfo.loginName}}</span>
      <span style="margin-top: 5px">{{userInfo.roleFlag === 0 ? '管理员' : userInfo.roleFlag === 1 ? '教 师' : '学 生'}}</span>
     </div>
    </div>
    <el-menu style="border-right: 0"
             :default-active="$route.path"
             background-color="#80bcb5"
             unique-opened
             text-color="#000"
             active-text-color="#666"
             router
    >
     <el-submenu
             :index="item.id"
             v-for="item in menuList"
             :key="item.id"
     >
      <template slot="title" >
       <i :class="item.icon" style="color: #000"></i>
       <span>{{ item.name }}</span>
      </template>
      <el-menu-item
              :index="'/' + item1.path"
              v-for="item1 in item.child"
              :key="item1.id"
      >{{ item1.childName }}</el-menu-item
      >
     </el-submenu>
    </el-menu>
    
   </el-aside>
   <el-main>
    <router-view/>
   </el-main>
  </el-container>
 </div>
</template>

<script>
 import {quitLogin} from "../api/user";

 export default {
    data(){
      return{
       userInfo:JSON.parse(sessionStorage.getItem('user')),
       menuList:[
        {
         name: '账户管理',
         id: '1',
         icon:'el-icon-s-custom',
         child: [
          {
           childName: '学生账户',
           id: '11',
           path: 'student'
          },
          {
           childName: '教师账户',
           id: '12',
           path: 'teacher'
          },
          {
           childName: '班级管理',
           id: '13',
           path: 'class'
          },
          {
           childName: '专业管理',
           id: '14',
           path: 'speciality'
          }
         ]
        },
        {
         name: '试题管理',
         id: '2',
         icon:'el-icon-s-order',
         child: [
          {
           childName: '试题库',
           id: '21',
           path: 'questions'
          },
          {
           childName: '试题组',
           id: '22',
           path: 'questionGroup'
          }
         ]
        },
        {
         name: '成绩管理',
         id: '3',
         icon:'el-icon-coin',
         child: [
          {
           childName: '成绩',
           id: '31',
           path: 'achievement'
          }
         ]
        },
       ]
      }
    },
    methods:{
     quitLogin() {
      this.$confirm('确定注销此账户, 是否继续?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
      }).then(() => {
       quitLogin().then(res => {
        if (res.data.code === 200) {
         this.$notify.success(res.data.message)
         sessionStorage.clear()
         this.$router.replace('/')
        }
       })
      })
     }
    }
  }
</script>
<style scoped lang="less" >

.home-content{
 width: 100%;
 height: 100%;
 .el-container {
  position: relative;
  width: 100%;
  height: 100%;
  
  /deep/ .el-aside {
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #80bcb5;
   overflow-x: hidden;
    .user-header{
     width: 100%;
     height: 100px;
     margin-bottom: 20px;
     box-sizing: border-box;
 
     display: flex;
     align-items: center;
     justify-content: flex-start;
     border-bottom: 1px solid #f0f2f5;
     img{
      width: 50px;
      height: 50px;
     }
     .user-info{
      margin-left: 10px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      cursor: pointer;
     }
    }
  }
  
  .el-main {
   background-color: #f0f2f5;
  }
 }
}
</style>
